<template>
  <div class="array-style">
    <el-row :gutter="8" type="flex" align="middle">
      <el-col
        :span="8"
        class="col-item col-item-name"
        :style="tagPaddingLeftStyle"
      >
        <el-row type="flex" justify="space-around" align="middle">
          <el-col :span="2" class="down-style-col">
            <span
              v-if="items.type === 'object'"
              class="down-style"
              @click="handleClickIcon"
            >
              <i v-if="showIcon" class="el-icon-caret-bottom icon-object"></i>
              <i v-else class="el-icon-caret-right icon-object"></i>
            </span>
          </el-col>
          <el-col :span="20">
            <el-input disabled value="Items" placeholder="Items" size="small" />
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-tooltip placement="top" content="全选">
              <el-checkbox disabled />
            </el-tooltip>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="3" class="col-item col-item-type">
        <el-select
          size="small"
          :modelValue="items.type"
          :disabled="disabled"
          class="type-select-style"
          @change="handleChangeType"
        >
          <el-option
            v-for="item in schemaTypes"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-col>

      <el-col
        v-if="schemaConfig.showDefaultValue"
        :span="5"
        class="col-item col-item-mock"
      >
        <el-input
          v-model="items.default"
          :disabled="disabled"
          size="small"
          placeholder="默认值"
        >
        </el-input>
      </el-col>

      <el-col :span="5" class="col-item col-item-desc" v-if="schemaConfig.showDescrption">
        <el-input
          v-model="items.description"
          :disabled="disabled"
          size="small"
          placeholder="描述"
        >
        </el-input>
      </el-col>
      
      <!-- 操作按钮 -->
      <el-col :span="3" class="col-item col-item-setting" v-if="schemaConfig.showBtn">
        <el-button
          type="text"
          :disabled="disabled"
          @click="
            handleAction({ eventType: 'setting', schemaType: items.type })
          "
        >
          <span class="adv-set">
            <el-tooltip placement="top" content="高级设置">
              <i class="el-icon-setting"></i>
            </el-tooltip>
          </span>
        </el-button>
        <el-button
          v-if="items.type === 'object'"
          type="text"
          :disabled="disabled"
          @click="handleAction({ eventType: 'add-field', isChild: true })"
        >
          <span>
            <el-tooltip placement="top" content="添加子节点">
              <i class="el-icon-plus plus"></i>
            </el-tooltip>
          </span>
        </el-button>
      </el-col>
    </el-row>

    <div class="option-formStyle" :style="{ paddingLeft: schemaConfig.indent }">
      <template v-if="items.type === 'array'">
        <SchemaArray
          :prefix="prefixArray"
          :data="items"
          :editor-id="editorId"
          :disabled="disabled"
        />
      </template>
      <template v-if="items.type === 'object' && showIcon">
        <SchemaObject
          :prefix="nameArray"
          :data="items"
          :editor-id="editorId"
          :disabled="disabled"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs, inject } from 'vue';
import DropPlus from './DropPlus.vue';
import SchemaObject from './SchemaObject.vue';
import { SCHEMA_TYPE } from '../helper/utils';

export default defineComponent({
  name: "SchemaArray",
  components: {
    DropPlus,
    SchemaObject,
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    prefix: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Object,
      default: () => {},
    },
    editorId: {
      type: String,
      default: "editor_id",
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state = reactive({
      showIcon: true,
      tagPaddingLeftStyle: {},
      schemaTypes: SCHEMA_TYPE,
      items: props.data.items,
    });

    const prefixArray = computed(() => {
      return [].concat(props.prefix, 'items')
    });

    const nameArray = computed(() => {
      return [].concat(prefixArray, 'properties')
    });

    const handleClickIcon = () => {
      state.showIcon = !state.showIcon
    };

    const { proxy } = getCurrentInstance();
    const handleAction = (opts) => {
      const { prefix, name } = props;
      proxy.mittBus.emit(`schema-update-${props.editorId}`, {
        prefix,
        name: name || 'items',
        ...opts,
      })
    };

    const handleChangeType = (value) => {
      handleAction({ eventType: 'schema-type', value })
    };

    // schema配置
    const schemaConfig = inject('schemaConfig');
    return {
      ...toRefs(state),
      nameArray,
      prefixArray,
      handleClickIcon,
      handleAction,
      handleChangeType,
      schemaConfig,
    };
  }
});
</script>


<style scoped>
</style>
